$preview-box-color: #333;
$preview-box-color2: #666;
$preview-box-border-color: rgb(238, 238, 238);
$preview-box-th-bg:rgb(232, 232, 232);
$preview-box-th-color:#333;
$preview-box-tr-bg:#fff;
$preview-box-tr-color:#333;
$preview-box-tr-border-color:rgb(219, 219, 219);

$preview-box-transition-duration: 300ms;
$preview-box-transition-timing-function: linear;
.preview-box__body{
    width: 100%;
}
.preview-box__box{
    width: 100%;
    padding: .1rem 0;
    .preview-box__header{
        width: 100%;
        .preview-box__header-title{
            width: 100%;
            word-break: break-all;
            font-size: .16rem;
            line-height: 1.4;
            color: $preview-box-color;
        }
        .preview-box__header-desc{
            padding: .1rem 0;
            width: 100%;
            word-break: break-all;
            font-size: .12rem;
            line-height: 1.4;
            color: $preview-box-color2;
        }
    }
    .preview-box__title{
        width: 100%;
        padding: .14rem 0 .14rem;
        white-space: nowrap;
        color: $preview-box-color;
        font-size: .14rem;
        @include flexLayout(flex,normal,center);
        .preview-box__text{
            padding-right: .2rem;
        }
    }
    .preview-box__table{
        width: 100%;
        overflow: auto;
    }
    .preview-box__tbody{
        min-width: 100%;
        width: fit-content;
        ::v-deep{
            .sortable-chosen{
                width: 100%;
                height: .48rem;
                list-style-type: none;
                .el-button{
                    width: 100%;
                    height: 100%;
                    background-color: transparent;
                }
            }
        }
    }
    .preview-box__tr,
    .preview-box__th{
        min-width: 100%;
        width: fit-content;
        @include flexLayout(flex, normal, center);
        background-color: $preview-box-th-bg;
        .preview-box__td{
            flex: 0 1 100%;
            min-width: 2rem;
            padding: 0 .12rem;
            text-align: center;
            color: $preview-box-th-color;
            font-size: .14rem;
            height: .48rem;
            @include flexLayout(flex, center, center);
        }
    }
    .preview-box__tr{
        background-color: $preview-box-tr-bg;
        .preview-box__td{
            border: 1px solid $preview-box-tr-border-color;
            color: $preview-box-tr-color;
            &+.preview-box__td{
                border-left: none;
            }
        }
        &+.preview-box__tr .preview-box__td{
            border-top: none;
        }
    }
    .ghost {
        opacity: 0.5;
        background: #c8ebfb;
    }

    &.phone{
        &.form{
            position: absolute;
            top: 0;
            right: 0;
            width: auto;
            z-index: 80;
            padding: 0 .1rem;
        }
        &.inline-model{
            position: relative;
            top: auto;
            right: auto;
            width: 100%;
            z-index: 80;
            padding: 0 .1rem;
            .preview-box__body{
                margin: .1rem auto;
            }
        }
        .preview-box__body{
            height: 6.67rem;
            width: 3.75rem;
            margin: .2rem 0 .2rem;
        }
        .preview-box__inner{
            @include flexLayout(flex,normal,normal);
            flex-flow: column;
            width: 100%;
            height: 100%;
            border-radius: .1rem;
            background-color: #fff;
            padding: .1rem .24rem;
            box-shadow: 0 2px 4px 1px rgba(40, 120, 255, 0.1), 0 0 6px 1px rgba(0, 0, 0, 0.1);
        }
        .preview-box__title{
            width: 100%;
            height: .6rem;
            flex: 0 0 auto;;
        }
        .preview-box__inner-body{
            width: 100%;
            flex: 1;
            height: calc(100% - .6rem);
            overflow: auto;
        }
        .preview-box__form{
            width: 100%;
            .preview-box__form-ul{
                height: 100%;
                overflow: auto;
                width: 100%;
            }
            ::v-deep{
                .preview-box__form-li{
                    margin-bottom: .1rem;
                    .preview-box__form-location{
                        padding: .1rem 0;
                        @include flexLayout(flex,justify,center);
                        .preview-box__form-location-label{
                            flex: 0 0 auto;
                            font-size: .14rem;
                        }
                        .preview-box__form-location-btn{
                            flex: 0 0 auto;
                        }
                    }
                }
                .c-input__box{
                    width: 100%;
                    padding: 0;
                    border-bottom: 1px solid #eee;
                    &.upload{
                        padding-bottom: .1rem;
                    }
                    &.location-address{
                        margin-top: .1rem;
                    }
                    &.input-textarea{
                        .c-input__info{
                            height: 1rem;
                        }
                    }
                    &.arrow{
                        position: relative;
                        padding-right: .12rem;
                        .c-input__value{
                            position: relative;
                        }
                        .c-input__value::after{
                            content: "";
                            position: absolute;
                            top: 50%;
                            right: -.12rem;
                            height: .08rem;
                            width: .08rem;
                            display: block;
                            transform: translate(-30%, -50%) rotate(135deg);
                            border-top: 1px solid #333;
                            border-right: 1px solid #333;
                            z-index: 4;
                            pointer-events: none;
                        }
                        &.location .c-input__value::after{
                            transform: translate(-30%, -50%) rotate(45deg);
                        }
                    }
                    .c-input__label{
                        width: 100%;
                        padding: .08rem 0;
                        font-size: .14rem;
                        word-break: break-all;
                        line-height: 1.4;
                        &.required{
                            position: relative;
                        }
                        &.required::before{
                            content: "*";
                            position: absolute;
                            top: 50%;
                            left: 0;
                            font-size: .14rem;
                            padding: 0 .04rem;
                            height: .2rem;
                            line-height: .27rem;
                            display: block;
                            color: #c53530;
                            transform: translate(-100%, -50%);
                            z-index: 4;
                            pointer-events: none;
                        }
                    }
                    .c-input__value{
                        width: 100%;
                        @include flexLayout(flex,normal,center);
                    }
                    .c-input__info{
                        flex: 1;
                        .el-input__inner{
                            border-color: transparent;
                            text-align: left;
                            padding: 0;
                        }
                        .preview-box__form-upload-box{
                            width: .8rem;
                            height: .8rem;
                            font-size: .3rem;
                            border: 1px solid #ccc;
                            color: #666;
                            border-radius: .04rem;
                            @include flexLayout(flex,center,center);
                        }
                    }
                    .c-input__suffix{
                        font-size: .12rem;
                        flex: 0 0 auto;
                        padding-left: .05rem;
                        /* height: 1.4rem; */
                        line-height: normal;
                        white-space: nowrap;
                        text-align: center;
                    }
                    .c-label__tag{
                        width: .35rem;
                        height: .14rem;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        color: #C53535;
                        border: 1px solid #C53535;
                        border-radius: .07rem / 50%;
                        padding-top: .02rem;
                        white-space: nowrap;
                        text-align: center;
                        font-size: .12rem;
                        vertical-align: middle;
                    }
                    .preview-box__form-upload-button{
                        width: 100%;
                        border-radius: .04rem;
                        background: #C53535;
                    }
                }
            }
        }
    }
}